<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.i18n.properties.js}"></script>
    <div id="root-path" th:text="${#servletContext.contextPath}" style="display:none;"></div>
    <div id="lang-country" th:text="${#locale.language + '_' + #locale.country}" style="display:none;"></div>
    <script th:src="@{/js/i18n.js}"></script>
    <title th:text="#{user.login.title}"></title>
    <meta name="description" content="呼叫管理系统">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.10}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>

    <script th:inline="javascript">
        // //获取国际化翻译值
        // console.log("-----------------")
        // console.log(ROOT)
        // console.log(LANG_COUNTRY)
        // console.log(i18n('user.login.username'));
        // console.log(i18n('user.login.password'));
        // console.log(i18n('user.login.code'));
        // console.log(i18n('user.login.remember'));
        // console.log(i18n('user.login.submit'));
    </script>

    <style>
        .language-selector {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 10px;
        }

        .lang-option {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }

        .lang-option:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body class="signin">
    <div class="language-selector">
        <a href="javascript:void(0);" class="lang-option" onclick="setLanguage('en_US')">英语</a>
        <a href="javascript:void(0);" class="lang-option" onclick="setLanguage('zh_CN')">中文</a>
<!--        <a href="javascript:void(0);" class="lang-option" onclick="setLanguage('ja_JP')">日语</a>-->
    </div>
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="m-b"></div>
                    <h4 th:text="#{user.login.welcome} + ' ' + #{sys.sysName}"></h4>
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm" autocomplete="off">
                    <h4 class="no-margins"><span th:text="#{user.login.submit}"></span>：</h4>
                    <input type="text"     name="username" class="form-control uname"     th:attr="placeholder=#{user.login.username}" value="admin"    />
                    <input type="password" name="password" class="form-control pword"     th:attr="placeholder=#{user.login.password}" value="admin123" />
                    <input type="text"     name="extNum" class="form-control uname"     th:attr="placeholder=#{user.login.extnum}" value="1001"    />
<!--                    <input type="text"     name="username" class="form-control uname"   th:attr="placeholder=#{user.login.username}" value="easycallcenter365"    />-->
<!--                    <input type="password" name="password" class="form-control pword"   th:attr="placeholder=#{user.login.password}"   value="easycallcenter365" />-->
<!--                    <input type="text"     name="extNum" class="form-control uname"     th:attr="placeholder=#{user.login.extnum}" value="1002"    />-->
<!--                    <input type="text"     name="username" class="form-control uname"   th:attr="placeholder=#{user.login.username}" value=""    />-->
<!--                    <input type="password" name="password" class="form-control pword"   th:attr="placeholder=#{user.login.password}"  value="" />-->
<!--                    <input type="text"     name="extNum" class="form-control uname"     th:attr="placeholder=#{user.login.extnum}" value=""    />-->
					<div class="row m-t" th:if="${captchaEnabled==true}">
						<div class="col-xs-6">
						    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
						</div>
						<div class="col-xs-6">
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
							</a>
						</div>
					</div>
                    <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
				        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme" th:text="#{user.login.remember}"></label>
				    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候..."><span th:text="#{user.login.submit}"></span></button>
                </form>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                Copyright easycallcenter365 All Rights Reserved. <br>
            </div>
        </div>
    </div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = [[${captchaEnabled}]];</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.10}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<script th:inline="javascript">
    function setLanguage(lang) {
        console.log('设置语言：' + lang)
        if (lang) {
            localStorage.setItem('lang', lang); // 存储语言到本地存储
            window.location.href = window.location.pathname + "?lang=" + lang; // 通过 URL 参数切换语言
        }
    }

    document.querySelectorAll('.lang-option').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认行为
            setLanguage(this.getAttribute('data-lang'));
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        // 从 URL 参数获取语言设置
        var lang = new URLSearchParams(window.location.search).get('lang');
        // 如果 URL 参数中没有语言设置，则从本地存储获取
        if (!lang) {
            lang = localStorage.getItem('lang');
        }
        // 如果本地存储中也没有语言设置，则从浏览器设置获取
        if (!lang) {
            lang = navigator.language || 'en_US'; // 默认值为 'en_US'
        }
        console.log('当前语言：' + lang);
        localStorage.setItem('lang', lang); // 更新本地存储的语言设置

        // 如果 URL 中没有 lang 参数，且本地存储中有 lang 设置，则更新 URL 参数
        if (lang && !new URLSearchParams(window.location.search).has('lang')) {
            setLanguage(lang);
            // window.history.replaceState({}, document.title, window.location.pathname + "?lang=" + lang);
        }
    });

    // document.addEventListener('DOMContentLoaded', function() {
    //     var lang = new URLSearchParams(window.location.search).get('lang') || localStorage.getItem('lang') || 'en_US';
    //     console.log('当前语言：' + lang)
    //     localStorage.setItem('lang', lang); // 更新本地存储的语言设置
    //
    //     // 如果 URL 中没有 lang 参数，且本地存储中有 lang 设置，则更新 URL 参数
    //     if (lang && !new URLSearchParams(window.location.search).has('lang')) {
    //         setLanguage(lang)
    //         // window.history.replaceState({}, document.title, window.location.pathname + "?lang=" + lang);
    //     }
    // });
</script>
</body>
</html>
